<template>
    <div class="aaa">
        <div class="aTop">
            <div class="title">重点目标</div>
        </div>
        <div class="aBottom">
            <el-card class="box-card ecOne">
                <div class="bt">
                    <el-button @click="backFun" type="primary" size="mini">返回态势</el-button>
                </div>
                <div class="se">
                    <el-form ref="searchForm" :model="searchForm" size="mini" inline>
                        <el-row>
                            <el-col :span="5">
                                <el-form-item label="目标所属">
                                    <el-select v-model="searchForm.targetOwnership" placeholder="请选择" clearable
                                        style="width: 90%">
                                        <el-option v-for="item in ownerData" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="所属国家">
                                    <el-select v-model="searchForm.homeCountry" placeholder="请选择" clearable
                                        style="width: 90%">
                                        <el-option v-for="item in countryData" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="总部详细地址">
                                    <el-input v-model="searchForm.address" clearable placeholder="请输入"
                                        style="width: 100%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-button @click="initPage" type="primary" size="mini">搜索</el-button>
                                <el-button size="mini" @click="reset">重置</el-button>
                            </el-col>
                        </el-row>
                    </el-form>

                </div>
            </el-card>

            <el-card>
                <div class="ta">
                    <el-table :data="tableData" stripe style="width: 100%" border size="mini">
                        <el-table-column label="序号" type="index" align="center">
                        </el-table-column>
                        <el-table-column prop="targetOwnership" label="目标所属" align="center">
                        </el-table-column>
                        <el-table-column prop="chineseName" label="目标中文名" align="center">
                        </el-table-column>
                        <el-table-column prop="englishName" label="目标英文名" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="domainName" label="域名" align="center">
                        </el-table-column>
                        <!-- <el-table-column prop="webSite" label="web site" align="center">
                        </el-table-column> -->
                        <el-table-column prop="upstreamTissue" label="上游组织（标注ID）" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="downstreamTissue" label="下游组织（标注ID" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="sketch" label="简述" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="year" label="成立年份" align="center">
                        </el-table-column>
                        <el-table-column prop="homeCountry" label="所属国家" align="center">
                        </el-table-column>
                        <el-table-column prop="state" label="所在州" align="center">
                        </el-table-column>
                        <el-table-column prop="city" label="城市/县" align="center">
                        </el-table-column>
                        <el-table-column prop="address" label="总部详细地址" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="longitude" label="总部经度" align="center">
                        </el-table-column>
                        <el-table-column prop="latitude" label="总部纬度" align="center">
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 分页条 -->
                <div class="block" style="text-align: right">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pageNo.current" :page-sizes="$NumberOfPages" :page-size="pageNo.size"
                        layout="total, sizes, prev, pager, next, jumper" :total="pageNo.total">
                    </el-pagination>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { KeyObjectList, KeyObjectBox } from "@/api/leftDetailList-society"
export default {
    data() {
        return {
            rid: '',
            ownerData: [],
            countryData: [],
            tableData: [],
            pageNo: {
                pageNum: 1, //当前页
                pageSize: 10, //每页的数量
                total: 1, // 总条目数
            },
            searchForm: {},
        };
    },

    created() {
        this.getTopData();
        this.initPage();
        this.getUrlRidFun();
    },
    methods: {
        getUrlRidFun() {
            this.rid = this.$route.query.rid;
            // if (this.rid) {
            //     this.initPage(this.rid);
            // }
        },

        backFun() {
            if (this.rid) {
                window.open('/index?flag=5', '_self') //有传参时返回社会层
            } else {
                this.$router.push({ path: '/index' });
            }
        },

        getTopData() {
            KeyObjectBox()
                .then((res) => {
                    if (res.code === 200) {
                        // console.log('@123', res);
                        res.data.ownership.map(item => {
                            if (item !== null)
                                this.ownerData.push({ value: item.targetOwnership, label: item.targetOwnership })
                        })
                        res.data.homeCountry.map(item => {
                            if (item !== null)
                                this.countryData.push({ value: item.homeCountry, label: item.homeCountry },)
                        })
                    } else {
                        this.$message.error('获取下拉框数据失败!')
                    }
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },

        initPage(rid) {
            const { pageSize, pageNum } = this.pageNo;
            let params = {
                pageSize,
                pageNum,
                ...this.searchForm
            };
            // 如果有 rid 参数，将其添加到请求参数中
            if (rid) {
                params.rid = rid;
            }
            // console.log('param', params);
            KeyObjectList(params)
                .then((res) => {
                    if (res.code === 200) {
                        // console.log('res', res);
                        this.tableData = res.data.list;
                        // console.log("this.tableData", this.tableData);
                        this.pageNo.total = res.data.total;
                    } else {
                        this.$message.error('获取数据失败!')
                    }
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },

        // 重置
        reset() {
            this.searchForm = {}
            this.pageNo.pageNum = 1;
            this.initPage()
        },

        // 改变一页显示的条数
        handleSizeChange(pageSize) {
            this.pageNo.pageSize = pageSize
            this.initPage()
        },
        // 改变当前的页码
        handleCurrentChange(pageNum) {
            this.pageNo.pageNum = pageNum
            this.initPage()
        },
    },

}
</script>

<style lang="scss" scoped>
.aaa {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;

    .aTop {
        background-color: #020013;
        width: 100%;
        height: 80px;
        position: relative;

        .title {
            white-space: nowrap;
            position: absolute;
            left: 54px;
            top: 23px;
            width: 192px;
            height: 37px;
            display: flex;
            font-size: 28px;
            font-weight: 700;
            color: #FFFFFF;
        }
    }

    .aBottom {
        padding: 20px;

        .bt {
            margin-bottom: 20px;
        }

        ::v-deep .el-date-editor--daterange {
            width: 250px;
        }

        .ecOne {
            margin-bottom: 15px;
        }

        .ta {
            margin-bottom: 10px;
        }

        .block {
            width: 100%;
            text-align: right;
        }
    }
}
</style>